import React, { FunctionComponent } from 'react';
import styles from './index.less';
import { Stepper } from 'react-vant';
import { useSelector, useDispatch } from 'umi';
import { IGlobalState, ICartProps } from '@/models/global';


export interface IShopcarProps {
    /** 同步商品列表 */
    syncGoodsByDva: (type?: boolean) => void;
    /** 展示或隐藏父组件的pop层 */
    changeCartPopupVis: (type: boolean) => void;
}

const Shoppingcar: FunctionComponent<IShopcarProps> = ({ syncGoodsByDva, changeCartPopupVis }) => {


    const { shoppingcars } = useSelector((state: { globalState: IGlobalState }) => state.globalState);
    const dispatch = useDispatch();

    /** 获取当前商品sku信息 */
    const getFoodSkuInfo = (food: ICartProps) => {
        const { price, skuSpliceId, sku, skuMap } = food;
        let skuOptionStr = '', skuPrice = price;
        if (skuSpliceId.includes('|')) {
            const skuIds = skuSpliceId.split('|')[1], skuIdsArr = skuIds.split(',');
            skuMap?.forEach(item => {
                if (item.ids === skuIds) skuPrice = item.price
            })
            sku?.forEach((item, index) => {
                item.values.forEach((op) => {
                    if (op.value === skuIdsArr[index]) skuOptionStr += (op.label + ',')
                })
            })
            skuOptionStr = skuOptionStr.slice(0, skuOptionStr.length - 1)
        }
        return { skuPrice, skuOptionStr }
    }

    /** 添加某一个商品 */
    const addItem = (item: ICartProps) => {
        dispatch({
            type: 'globalState/addSkuFoodToCart',
            payload: item
        })
        syncGoodsByDva()
    }
    /** 减少某一个商品 */
    const reduceItem = (item: ICartProps) => {
        dispatch({
            type: 'globalState/delSkuFoodToCart',
            payload: item
        })
        syncGoodsByDva()
        if(!shoppingcars.length){
            changeCartPopupVis(false)
        }
    }
    /** 清空购物车 */
    const clearShoppingcar = ()=>{
        dispatch({
            type:'globalState/clearShoppingcar'
        })
        syncGoodsByDva()
        changeCartPopupVis(false)
    }

    return (
        <div className={styles.shoppingcar}>
            <div className={styles.shoppingcar_header}>
                购物车
                <span className={styles.shoppingcar_header_clear} onClick={clearShoppingcar}>清空购物车</span>
            </div>
            <div className={styles.shoppingcar_body}>
                {
                    shoppingcars.map((item, index) => (
                        <div key={`shoppingcar${index}`} className={styles.shoppingcar_body_item}>
                            <div className={styles.shoppingcar_body_item_title}>
                                {item.name}
                                <div className={styles.shoppingcar_body_item_title_sku}>{getFoodSkuInfo(item).skuOptionStr}</div>
                            </div>
                            <div className={styles.shoppingcar_body_item_price}>
                                <span className={styles.shoppingcar_body_item_price_num}>￥{getFoodSkuInfo(item).skuPrice}</span>
                                <Stepper
                                    beforeChange={() => false}
                                    min={0}
                                    value={item.buy_numbers}
                                    theme="round"
                                    buttonSize="22"
                                    disableInput
                                    onPlus={() => addItem(item)}
                                    onMinus={() => reduceItem(item)}
                                />
                            </div>
                        </div>
                    ))
                }
            </div>
        </div>
    )
}


export default Shoppingcar
